<template>
    <div class="container">
        <mySecondaryFrame direction="left" :styleObj="{
            width: '290px',
        }">
            <template v-slot:header>
                {{ getUserName }}
            </template>
            <template v-slot:footer>
                <ul class="">
                    <li>我的余额</li>
                    <li @click="toBuyMoodsOrder">购物订单</li>
                    <li>转运订单</li>
                    <li>我的仓库</li>
                    <li>我的包裹</li>
                    <li style="border-top: solid 1px rgb(245, 245, 245);">退出</li>
                </ul>
            </template>
        </mySecondaryFrame>

    </div>
</template>

<script>
import mySecondaryFrame from '@/components/myHome/mySecondaryFrame'

export default {
    name: "",
    components: {
        mySecondaryFrame
    },
    data() {
        return {
        }
    },
    computed: {
        getUserName() {
            return localStorage.getItem('username') || 'admin'
        }
    },
    methods: {
        toBuyMoodsOrder() {
            this.$router.push('mySetPage/myOrder')
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    ul {
        background-color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

        li {
            height: 40px;
            padding: 0 10px;
            line-height: 40px;
            font-size: 14px;


            &:hover {
                background-color: rgb(245, 245, 245);
            }
        }


    }
}
</style>